<template>
  <view class="department-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          type="text"
          v-model="keyword"
          placeholder="搜索科室"
          @input="onSearch"
        />
      </view>
    </view>
    
    <!-- 科室列表 -->
    <view class="department-list">
      <!-- 常用科室 -->
      <view class="section">
        <view class="section-title">常用科室</view>
        <view class="grid-list">
          <view 
            class="grid-item"
            v-for="(item, index) in commonDepartments"
            :key="index"
            @tap="selectDepartment(item)"
          >
            <image :src="item.icon" mode="aspectFit" class="icon" />
            <text class="name">{{ item.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 全部科室 -->
      <view class="section">
        <view class="section-title">全部科室</view>
        <view class="category-list">
          <view 
            class="category-item"
            v-for="(category, index) in departments"
            :key="index"
          >
            <view class="category-name">{{ category.name }}</view>
            <view class="department-grid">
              <view 
                class="grid-item"
                v-for="(dept, idx) in category.departments"
                :key="idx"
                @tap="selectDepartment(dept)"
              >
                <text class="name">{{ dept.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 搜索关键词
const keyword = ref('')
const disease = ref('')

// 常用科室
const commonDepartments = ref([
  {
    id: 1,
    name: '内科',
    icon: '/static/department/internal.png'
  },
  {
    id: 2,
    name: '外科',
    icon: '/static/department/surgery.png'
  },
  {
    id: 3,
    name: '儿科',
    icon: '/static/department/pediatrics.png'
  },
  {
    id: 4,
    name: '妇产科',
    icon: '/static/department/obstetrics.png'
  },
  {
    id: 5,
    name: '眼科',
    icon: '/static/department/ophthalmology.png'
  },
  {
    id: 6,
    name: '口腔科',
    icon: '/static/department/dentistry.png'
  }
])

// 全部科室
const departments = ref([
  {
    name: '内科',
    departments: [
      { id: 101, name: '心内科' },
      { id: 102, name: '呼吸内科' },
      { id: 103, name: '消化内科' },
      { id: 104, name: '神经内科' },
      { id: 105, name: '内分泌科' }
    ]
  },
  {
    name: '外科',
    departments: [
      { id: 201, name: '普外科' },
      { id: 202, name: '骨科' },
      { id: 203, name: '神经外科' },
      { id: 204, name: '心胸外科' },
      { id: 205, name: '泌尿外科' }
    ]
  },
  {
    name: '专科',
    departments: [
      { id: 301, name: '眼科' },
      { id: 302, name: '耳鼻喉科' },
      { id: 303, name: '口腔科' },
      { id: 304, name: '皮肤科' },
      { id: 305, name: '精神科' }
    ]
  }
])

// 搜索科室
const onSearch = (e) => {
  const value = e.detail.value.trim()
  // 这里处理搜索逻辑
}

// 选择科室
const selectDepartment = (department) => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?departmentId=${department.id}&disease=${disease.value}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { disease: diseaseName } = page.$page?.options || {}
  
  if (diseaseName) {
    disease.value = decodeURIComponent(diseaseName)
    // 这里可以根据疾病名称推荐科室
  }
})
</script>

<style lang="scss">
.department-container {
  min-height: 100vh;
  background: $bg-color;
  
  .search-bar {
    padding: 20rpx;
    background: #fff;
    
    .search-box {
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 12rpx;
      }
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
    }
  }
  
  .department-list {
    padding: 20rpx;
    
    .section {
      background: #fff;
      border-radius: $radius-lg;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
    }
    
    .grid-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30rpx;
      
      .grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 12rpx;
        }
        
        .name {
          font-size: 28rpx;
          color: $text-primary;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
    
    .category-list {
      .category-item {
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .category-name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 20rpx;
        }
        
        .department-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20rpx;
          
          .grid-item {
            height: 88rpx;
            background: $bg-color;
            border-radius: $radius-lg;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .name {
              font-size: 28rpx;
              color: $text-regular;
            }
            
            &:active {
              background: $primary-light;
              
              .name {
                color: $primary-color;
              }
            }
          }
        }
      }
    }
  }
}
</style> 